import React, { useState, useEffect } from 'react';
import { Card, Input, Button, Typography, Space, Tooltip } from 'antd';
import { SendOutlined, LoadingOutlined, InfoCircleOutlined } from '@ant-design/icons';
import './TextPrompt.css';

const { TextArea } = Input;
const { Title, Text } = Typography;

// 预设的文本示例
const PROMPT_EXAMPLES = [
  '增加图像的饱和度和对比度',
  '将背景改为海滩日落场景',
  '添加明亮的霓虹光效',
  '将图像转换为水彩画风格',
  '使图像看起来更梦幻，添加一些魔法元素'
];

const TextPrompt = ({ value, onChange, onGenerate, isGenerating, disabled }) => {
  const [charCount, setCharCount] = useState(0);
  const MAX_CHARS = 500;

  useEffect(() => {
    setCharCount(value.length);
  }, [value]);

  const handleChange = (e) => {
    const text = e.target.value;
    if (text.length <= MAX_CHARS) {
      onChange(text);
    }
  };

  const handleInsertExample = (example) => {
    onChange(example);
  };

  const disableGenerate = disabled || isGenerating || value.length > MAX_CHARS;

  return (
    <Card className="text-prompt-card">
      <div className="prompt-header">
        <Title level={4} className="prompt-title">文字描述/指令</Title>
        <Tooltip title="通过文字描述告诉AI你想要什么效果，描述越详细，效果越好">
          <InfoCircleOutlined />
        </Tooltip>
      </div>
      
      <Text type="secondary" className="prompt-description">
        描述想要的图像效果或提供编辑指令（如"增加饱和度"、"添加雪景背景"等）
      </Text>
      
      <TextArea
        className="prompt-input"
        value={value}
        onChange={handleChange}
        placeholder="描述你想要的图像效果，或者给AI提供具体的编辑指令..."
        autoSize={{ minRows: 3, maxRows: 6 }}
        disabled={disabled || isGenerating}
        maxLength={MAX_CHARS}
        showCount={false}
      />
      
      <div className="char-count">
        <Text type={charCount > MAX_CHARS ? "danger" : "secondary"}>
          {charCount}/{MAX_CHARS}
        </Text>
      </div>
      
      <div className="prompt-examples">
        <Text type="secondary">示例：</Text>
        <div className="example-tags">
          {PROMPT_EXAMPLES.map((example, index) => (
            <Tooltip key={index} title={example}>
              <div 
                className={`example-tag ${disabled ? 'disabled' : ''}`} 
                onClick={() => !disabled && handleInsertExample(example)}
              >
                {example.length > 15 ? example.substring(0, 15) + '...' : example}
              </div>
            </Tooltip>
          ))}
        </div>
      </div>
      
      <div className="prompt-footer">
        <Space>
          <Button 
            type="primary" 
            icon={isGenerating ? <LoadingOutlined /> : <SendOutlined />}
            onClick={onGenerate}
            loading={isGenerating}
            disabled={disableGenerate}
            className="generate-button"
          >
            {isGenerating ? '生成中...' : '生成图像'}
          </Button>
          <Text type="secondary" className="prompt-tip">
            处理时间约10-30秒
          </Text>
        </Space>
      </div>
    </Card>
  );
};

export default TextPrompt;